<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>详细信息</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../../common/css/vant-index.css" />
		<link rel="stylesheet" type="text/css" href="../../common/css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/baseInfo.css" />
		<style>
			.bodyStatus {
				font-size: 0.28rem;
				height: 0.73rem;
				line-height: 0.73rem;
			}
			.container {
				min-height: 9.44rem;
				padding-bottom: 1.92rem;
			}
			.info-body div {
				position: relative;
			}
			.input-unit {
				position: absolute;
				right: 0.33rem;
				top: 0.22rem;
				font-size: 0.28rem;
				color: rgba(0, 0, 0, 0.45);
				z-index: 99;
			}
			.listStyle {
				flex-direction: column;
			}
			.otherInput {
				margin: 0.21rem auto;
				padding: 0 0.21rem;
			}
			.van-field__body {
				height: 100%;
			}
			.otherInput > div {
				height: 1.22rem;
			}
			.van-picker__columns {
				position: relative;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<van-nav-bar
				title="糖尿病患者缓解调查问卷"
				left-text="返回"
				left-arrow
				@click-left="onClickLeft"
				@click-right="onClickRight"
			>
				<template #right>
					<van-icon name="wap-home-o" size="18" />
				</template>
			</van-nav-bar>
			<div class="container">
				<div class="info-question" v-for="item in questionList">
					<p :class="item.type == 'button' ? 'marginTop' : ''">
						{{item.title || item.label}}
					</p>
					<div v-if="item.type == 'input'">
						<span class="input-unit">{{item.unit}}</span>
						<van-field
							v-model="info[item.key]"
							:placeholder="item.placeholder"
						/>
					</div>
					<div v-if="item.type == 'number'">
						<van-password-input
							:value="info[item.key]"
							:focused="showKeyboard"
							@focus="showKeyboard = true"
						/>
						<van-number-keyboard
							v-model="info[item.key]"
							:show="showKeyboard"
							@blur="showKeyboard = false"
						/>
					</div>
					<div v-if="item.type == 'button'">
						<van-button
							v-for="(v, i) in item.button"
							:class="v.active ? 'active' : ''"
							@click="handleClick(v, i)"
							>{{v.label}}</van-button
						>
					</div>
					<div v-if="item.type == 'time'">
						<div class="timePicker" @click="clickTime">
							<span>{{placeholder[item.key]}}</span>
							<img class="datePick" src="../img/date.png" />
						</div>
						<van-popup v-model:show="show" position="bottom">
							<van-datetime-picker
								v-model="info[item.key]"
								type="date"
								title="年/月/日"
								:formatter="formatter"
								:default-index="0"
								:min-date="minDate"
								:max-date="maxDate"
								@cancel="onCancel"
								@confirm="onConfirm(item)"
							/>
						</van-popup>
					</div>
					<div class="listStyle" v-if="item.type == 'list'">
						<div class="info-body" v-for="v in item.list">
							<p
								:class="item.type == 'button' ? 'marginTop bodyStatus' : 'bodyStatus'"
							>
								{{v.title}}
							</p>
							<div v-if="v.type == 'input'">
								<span class="input-unit">{{v.unit}}</span>
								<van-field
									v-model="info[v.key]"
									type="number"
									:placeholder="v.placeholder"
								/>
							</div>
						</div>
					</div>
				</div>
				<div v-if="other" class="otherInput">
					<van-field
						v-model="info.diabetesComplicationSymptomOther"
						rows="2"
						autosize
						type="textarea"
						maxlength="50"
						placeholder="请输入其他糖尿病并发症，50字内"
						style="line-height: 46px"
					/>
				</div>
				<div class="baseInfo_value" @click="handleSubmit">
					<span style="color: #f3f3f3">提交</span>
				</div>
			</div>
		</div>
	</body>
	<!-- 上线环境用 -->
	<script src="../../common/js/vue.global.prod.js"></script>
	<script src="../../base.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../../common/js/axios.min.js"></script>
	<script src="../../common/js/rem.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
		} from '../../common/js/api/vue3-axios-utils.js'
		const baseInfo = {
			data() {
				return {
					questionList: [
						{
							title: '1.您的姓名',
							type: 'input',
							key: 'name',
							placeholder: '请输入姓名',
						},
						{
							title: '2.性别',
							type: 'button',
							key: 'sex',
							button: [
								{ label: '男', key: 'sex', value: '1' },
								{ label: '女', key: 'sex', value: '2' },
							],
						},
						{
							title: '3.手机号码',
							type: 'input',
							key: 'phone',
							placeholder: '请输入手机号码',
						},
						{
							title: '4.糖尿病确诊情况',
							type: 'button',
							key: 'diabetesDiagnosis',
							button: [
								{ label: '未确诊', key: 'diabetesDiagnosis', value: '1' },
								{ label: '已确诊', key: 'diabetesDiagnosis', value: '2' },
							],
						},
					],
					info: {},
					other: false,
					show: false,
					placeholder: {
						diabetesDiagnosisDate: '',
					},
					getUrl: '/archive/reverse/get',
					postUrl: '/archive/reverse/commit',
					minDate: new Date(1920, 0, 1),
					maxDate: new Date(),
				}
			},
			watch: {
				'info.diabetesDiagnosis'(n) {
					if (n == '2' && this.questionList.length < 6) {
						this.questionList.push(
							...[
								{
									title: '5.糖尿病类型',
									type: 'button',
									key: 'diabetesType',
									button: [
										{ label: '1型糖尿病', key: 'diabetesType', value: '1' },
										{ label: '2型糖尿病', key: 'diabetesType', value: '2' },
										{ label: '妊娠糖尿病', key: 'diabetesType', value: '3' },
										{
											label: '其他类型糖尿病',
											key: 'diabetesType',
											value: '4',
										},
									],
								},
								{
									title: '6.确诊日期',
									type: 'time',
									key: 'diabetesDiagnosisDate',
									placeholder: '年/月/日',
								},
								{
									title: '7.糖尿病家族史（选填）',
									type: 'button',
									key: 'diabetesFamilyHistory',
									button: [
										{ label: '有', key: 'diabetesFamilyHistory', value: '1' },
										{ label: '无', key: 'diabetesFamilyHistory', value: '2' },
									],
								},
								{
									title: '8.用药情况（选填）',
									type: 'button',
									key: 'drugHistory',
									button: [
										{ label: '吃药', key: 'drugHistory', value: '1' },
										{ label: '打胰岛素', key: 'drugHistory', value: '2' },
										{ label: '吃药和打胰岛素', key: 'drugHistory', value: '3' },
										{ label: '不用药', key: 'drugHistory', value: '4' },
									],
								},
								{
									label: '9.当前身体状况',
									type: 'list',
									key: 'body',
									list: [
										{
											title: '身高',
											type: 'input',
											key: 'height',
											unit: 'cm',
											placeholder: '请输入身高',
										},
										{
											title: '体重',
											type: 'input',
											key: 'weight',
											unit: 'kg',
											placeholder: '请输入体重',
										},
										{
											title: '腰围',
											type: 'input',
											key: 'waistline',
											unit: 'cm',
											placeholder: '请输入腰围',
										},
										{
											title: '空腹C肽',
											type: 'input',
											key: 'cpeptide',
											unit: 'μg/L',
											placeholder: '请输入空腹C肽',
										},
										{
											title: '餐后2小时C肽',
											type: 'input',
											key: 'cpeptide2h',
											unit: 'μg/L',
											placeholder: '请输入餐后2小时C肽',
										},
									],
								},
								{
									title: '10.糖尿病并发症',
									type: 'button',
									key: 'diabetesComplication',
									button: [
										{ label: '有', key: 'diabetesComplication', value: '1' },
										{ label: '无', key: 'diabetesComplication', value: '2' },
									],
								},
							]
						)
					} else if (n == '1' && this.questionList.length > 4) {
						this.questionList = this.questionList.splice(0, 4)
					}
				},
				'info.diabetesComplication'(n) {
					if (
						this.info.diabetesDiagnosis == 2 &&
						n == '1' &&
						this.questionList.length < 11
					) {
						this.questionList.push({
							title: '已确诊的糖尿病并发症（可多选）',
							type: 'button',
							multiple: true,
							key: 'diabetesComplicationSymptom',
							button: [
								{
									label: '心血管自主神经病变',
									key: 'diabetesComplicationSymptom',
									value: '1',
								},
								{
									label: '糖尿病视网膜病变',
									key: 'diabetesComplicationSymptom',
									value: '2',
								},
								{
									label: '糖尿病肾病',
									key: 'diabetesComplicationSymptom',
									value: '3',
								},
								{
									label: '其他',
									key: 'diabetesComplicationSymptom',
									value: '4',
								},
							],
						})
					} else if (n == '2' && this.questionList.length > 10) {
						this.questionList = this.questionList.splice(0, 10)
						this.other = false
						this.info.diabetesComplicationSymptomOther = ''
					}
				},
				'info.diabetesComplicationSymptom'(n) {
					if (n) {
						if (n.indexOf('4') > -1) {
							this.other = true
						} else {
							this.other = false
							this.info.diabetesComplicationSymptomOther = ''
						}
					}
				},
			},
			created() {
				this.placeholder.diabetesDiagnosisDate = '年/月/日'
				this.fetchData()
			},
			methods: {
				fetchData() {
					const patientId = localStorage.getItem('pid')
					getAction(spliceUrl(this.getUrl), { patientId }).then(res => {
						if (res.data.success) {
							if (res.data.result) {
								this.info = res.data.result
								this.placeholder.diabetesDiagnosisDate =
									res.data.result.diabetesDiagnosisDate
								const date2 = new Date(res.data.result.diabetesDiagnosisDate)
								this.info.diabetesDiagnosisDate = res.data.result
									.diabetesDiagnosisDate
									? date2
									: new Date()
								this.$nextTick(() => {
									this.questionList.forEach(v => {
										for (let i in this.info) {
											if (i == v.key && v.type == 'button') {
												v.button.forEach(n => {
													if (n.value == this.info[i]) {
														n.active = true
													}
												})
											}
											if (i == v.key && v.type == 'button' && v.multiple) {
												v.button.forEach(n => {
													if (this.info[i].includes(n.value)) {
														n.active = true
													}
												})
											}
										}
									})
								})
							}
						}
					})
				},
				clickTime() {
					this.show = true
				},
				handleClick(v, i) {
					this.questionList.forEach(n => {
						if (n.key == v.key) {
							if (!n.multiple) {
								this.info[v.key] = v.value
								n.button.forEach(item => {
									item.active = false
								})
								n.button[i].active = true
							} else {
								n.button[i].active = n.button[i].active ? false : true
								this.info[v.key] = this.info[v.key] ?? []
								this.info[v.key] = n.button
									.filter(k => k.active)
									.map(item => {
										return item.value
									})
							}
						}
					})
				},
				onConfirm(item) {
					const { info } = this
					const time = this.formateDate(info[item.key])
					this.info[item.key] = time
					this.placeholder[item.key] = time
					this.show = false
				},
				formateDate(date) {
					var d = new Date(date)
					var y = d.getFullYear()
					var m = d.getMonth() + 1
					var d1 = d.getDate()
					m = m < 10 ? '0' + m : m
					d1 = d1 < 10 ? '0' + d1 : d1
					const time = y + '-' + m + '-' + d1
					return time
				},
				formatter(type, val) {
					if (type === 'year') {
						return `${val}年`
					} else if (type === 'month') {
						return `${val}月`
					}
					return val
				},
				check() {
					if (!this.info.name) {
						this.$toast.fail('请输入姓名！')
						return false
					}
					if (!this.info.sex) {
						this.$toast.fail('请选择性别！')
						return false
					}
					if (!this.info.phone) {
						this.$toast.fail('请输入手机号码！')
						return false
					}
					if (!this.info.diabetesDiagnosis) {
						this.$toast.fail('请选择确诊情况！')
						return false
					}
					if (this.info.diabetesDiagnosis == 2 && !this.info.height) {
						this.$toast.fail('请填写身高！')
						return false
					}
					if (this.info.diabetesDiagnosis == 2 && !this.info.weight) {
						this.$toast.fail('请填写体重！')
						return false
					}
					if (this.info.diabetesDiagnosis == 2 && !this.info.waistline) {
						this.$toast.fail('请输入腰围！')
						return false
					}
					if (this.info.diabetesDiagnosis == 2 && !this.info.cpeptide) {
						this.$toast.fail('请输入空腹C肽！')
						return false
					}
					if (this.info.diabetesDiagnosis == 2 && !this.info.cpeptide2h) {
						this.$toast.fail('请输入餐后2小时C肽！')
						return false
					}
					if (
						this.info.diabetesDiagnosis == 2 &&
						!this.info.diabetesComplication
					) {
						this.$toast.fail('请选择糖尿病并发症！')
						return false
					}
					return true
				},
				handleSubmit() {
					if (!this.check()) return
					const { diabetesDiagnosisDate } = this.info
					const dis =
						this.info.diabetesDiagnosis == 2
							? this.formateDate(diabetesDiagnosisDate)
							: ''
					let diabetesComplicationSymptom
					this.info.diabetesComplication == 1 &&
						(diabetesComplicationSymptom =
							typeof this.info.diabetesComplicationSymptom == 'object'
								? this.info.diabetesComplicationSymptom.join(',')
								: this.info.diabetesComplicationSymptom)
					const params = {
						...this.info,
						diabetesDiagnosisDate: dis,
						diabetesComplicationSymptom,
					}
					postAction(spliceUrl(this.postUrl), params).then(res => {
						res = res.data
						if (res.success) {
							const patientId = localStorage.getItem('pid')
							getAction(spliceUrl(this.getUrl), { patientId }).then(a => {
								a = a.data
								if (a.success) {
									window.location.href =
										'./reverseEnd.html?result=' + a.result.result
								}
							})
						}
					})
				},
				onClickLeft() {
					history.back()
				},
				onClickRight() {
					window.location.href = '../index.html'
				},
			},
		}

		const app = Vue.createApp(baseInfo)

		app.use(vant)
		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)
		app.use(vant.Popup)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");
		app.mount('#app')
	</script>
</html>
